<!DOCTYPE html>
<html>
<head>
	<title></title>


<style>
	.box{width: 100%;margin:0rem auto;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
	.box-items {-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center;}
	.flex-1{display: block;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;width: 0;-webkit-flex-basis: 0;-ms-flex-preferred-size: 0;flex-basis: 0;}
	.pwd-control {padding: 1rem 0 2.5rem;text-align: center;}
	.pwd-control .item {margin: 0 0.1rem;position: relative;}
	.pwd-control .item.circle:after {content: "";width: 8px;height: 8px;background: #000;border-radius: 50%;position: absolute;top: 50%;left: 50%;margin-top: -4px;margin-left: -4px;}
	.pwd-control .normal input {color: #000;}
	.pwd-control input {display: block;width: inherit;border-radius: 3px;text-align: center;border: 1px solid #c79f62;width: 100%;color: #fff;line-height: 35px}
	.pwd-control input:focus {box-shadow: 0px 0px 20px #c79f62;}
	.pwd-control .box {padding: 0rem;}
</style>
</head>
<body>
	<div class="pwd-control" id="payPwd">
        <div class="box">
            <div class="flex-1 item"><input maxlength="1" type="tel"></div>
            <div class="flex-1 item"><input maxlength="1" type="tel"></div>
            <div class="flex-1 item"><input maxlength="1" type="tel"></div>
            <div class="flex-1 item"><input maxlength="1" type="tel"></div>
            <div class="flex-1 item"><input maxlength="1" type="tel"></div>
            <div class="flex-1 item"><input maxlength="1" type="tel"></div>
        </div>
    </div>
    <input class="url" type="hidden" value="{:url('Depot/pay')}">
    <input class="order_id" type="hidden" value="{$order_id}">
</body>
<script src="__INDEX__/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="__INDEX__/js/payPwd.js"></script>
<script src="__INDEX__/layer/layer.js"></script>
<script type="text/javascript">
	$(function(){
		$("#payPwd").payPwd({
			max:6,
			type:"password",
			callback:function(arr) {
				var url = $('.url').val();
				var order_id = $('.order_id').val();
				//alert(order_id);
				$.ajax({
			        type: 'POST',
			        url: url,
			        dataType: 'json',
			        data: {pwd:arr,order_id:order_id},
			        success: function (data) {
			            if( data.result == 0 ){
			                layer.msg(data.msg,{time:2000}, function(){
								window.parent.location.href = data.url;
								var index = parent.layer.getFrameIndex(window.name);
		                        parent.layer.close(index);
							}); 
			            }else{
							layer.msg(data.msg,{time:2000}, function(){
								window.parent.location.reload();
								var index = parent.layer.getFrameIndex(window.name);
		                        parent.layer.close(index);
							}); 
			            }
			        }
			    });
			}
		})
	})
</script>

</html>